<!--
 * @Author: daidai
 * @Date: 2022-03-01 09:43:37
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 11:40:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-bottom.vue
-->
<template>
  <div
    class="left_boottom_wrap block_26 flex-col"
    :class="{ 'overflow-y-auto': !sbtxSwiperFlag }"
  >
    <div class="text-wrapper_33 flex-col">
      <span class="text_216">排名情况</span>
    </div>
    <div class="text-wrapper_34 flex-row">
      <span class="text_217">排名</span>
      <span class="text_218">线路</span>
      <span class="text_219">完成值</span>
      <span class="text_220">同比增降</span>
    </div>
    <component
      class="scrollc beautify-scroll-def"
      :is="components"
      :data="list"
      :class-option="defaultOption"
    >
      <ul>
        <template v-for="(item, i) in list">
          <li class="block_27 flex-row" :key="i" v-if="i < 3">
            <span class="text_221">NO.</span>
            <span class="text_222">{{ i + 1 }}</span>
            <span class="text_223">{{item.lineName}}</span>
            <span class="text_224">{{item.completionValue}}</span>
            <img
              v-if="Number(item.completionIncRate) === 0 || Number(item.completionIncRate) > 0"
              class="thumbnail_30 thumbnail_3111"
              referrerpolicy="no-referrer"
              src="@/assets/imgs/up.png"
            />
            <img
              v-else
              class="thumbnail_30 thumbnail_3112"
              referrerpolicy="no-referrer"
              src="@/assets/imgs/SketchPngb7d00c145a119af23523016741e3fc1041795e56238b2bf05dc826cf4358baba.png"
            />
            <span class="text_225">{{item.completionIncRate}}%</span>
          </li>
          <li class="block_27 flex-row" :key="i" v-else>
            <span class="text_236">{{ i + 1 }}</span>
            <span class="text_223">{{item.lineName}}</span>
            <span class="text_224">{{item.completionValue}}</span>
            <img
              v-if="Number(item.completionIncRate) === 0  || Number(item.completionIncRate) > 0"
              class="thumbnail_30 thumbnail_3111"
              referrerpolicy="no-referrer"
              src="@/assets/imgs/up.png"
            />
            <img
              v-else
              class="thumbnail_30 thumbnail_3112"
              referrerpolicy="no-referrer"
              src="@/assets/imgs/SketchPngb7d00c145a119af23523016741e3fc1041795e56238b2bf05dc826cf4358baba.png"
            />
            <span class="text_225">{{item.completionIncRate}}%</span>
          </li>
        </template>
      </ul>
    </component>
  </div>

  <!-- <Reacquire v-else @onclick="getData" style="line-height: 200px" /> -->
</template>

<script>
import { currentGET } from "api";
import vueSeamlessScroll from "vue-seamless-scroll"; // vue2引入方式
import Kong from "@/components/kong.vue";
export default {
  components: { vueSeamlessScroll, Kong },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      list: [],
      pageflag: true,
      components: vueSeamlessScroll,
      defaultOption: {
        ...this.$store.state.setting.defaultOption,
        singleHeight: 90,
        limitMoveNum: 5,
        step: 0,
      },
    };
  },
  computed: {
    sbtxSwiperFlag() {
      let sbtxSwiper = this.$store.state.setting.sbtxSwiper;
      if (sbtxSwiper) {
        this.components = vueSeamlessScroll;
      } else {
        this.components = Kong;
      }
      return sbtxSwiper;
    },
  },
  created() {},

  mounted() {
    this.init(this.data)
  },
  watch: {
    data: {
      handler(val) {
        this.init(val);
      },
      deep: true,
    },
  },
  methods: {
    init(val = []) {
      const list = [...val]
      // this.pageflag = true;
      // // this.pageflag =false
      // currentGET("big3", { limitNum: 20 }).then((res) => {
      //   // console.log("设备提醒", res);
      //   if (res.success) {
          // this.pageflag = false;
          // this.countUserNumData = res.data;
          list.forEach(item => {
            item.completionValue = Number(item.completionValue || 0).toFixed(2)
            item.completionIncRate = Number(item.completionIncRate || 0).toFixed(0)
          });
          list.sort((a,b) => b.completionValue - a.completionValue)
          this.list = list;
          let timer = setTimeout(() => {
            clearTimeout(timer);
            this.defaultOption.step =
              this.$store.state.setting.defaultOption.step;
          }, this.$store.state.setting.defaultOption.waitTime);
        // } else {
        //   this.pageflag = false;
        //   this.$Message({
        //     text: res.msg,
        //     type: "warning",
        //   });
        // }
      // });
    },
  },
};
</script>
<style lang="scss" scoped>
.left_boottom_wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.flex-col {
  display: flex;
  flex-direction: column;
}

.doudong {
  //  vertical-align:middle;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
.scrollc {
  overflow-y: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.block_26 {
  background-color: rgba(4, 42, 102, 1);
  width: 281px;
  height: 262px;
  .text-wrapper_33 {
    height: 24px;
    background: url(~@/assets/imgs/SketchPng7c9234f31dfba2987f06e75cbcba7203428cc3095bfc13591a733753be7dfa94.png)
      100% no-repeat;
    background-size: 100% 100%;
    width: 88px;
    .text_216 {
      background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 1) 0,
        rgba(139, 203, 255, 1) 100%
      );
      width: 53px;
      height: 18px;
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      font-size: 13px;
      letter-spacing: 0.24375000596046448px;
      font-family: PingFangSC-Heavy;
      font-weight: 900;
      text-align: left;
      white-space: nowrap;
      line-height: 18px;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 2px 0 0 22px;
    }
  }
  
  .text-wrapper_34 {
    background-color: rgba(6, 54, 112, 1);
    width: 257px;
    height: 30px;
    margin: 12px 0 0 12px;
    .text_217 {
      width: 25px;
      height: 17px;
      overflow-wrap: break-word;
      color: rgba(96, 127, 181, 1);
      font-size: 12px;
      letter-spacing: 0.22499999403953552px;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 17px;
      margin: 7px 0 0 8px;
    }
    .text_218 {
      width: 25px;
      height: 17px;
      overflow-wrap: break-word;
      color: rgba(96, 127, 181, 1);
      font-size: 12px;
      letter-spacing: 0.22499999403953552px;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 17px;
      margin: 7px 0 0 43px;
    }
    .text_219 {
      width: 37px;
      height: 17px;
      overflow-wrap: break-word;
      color: rgba(96, 127, 181, 1);
      font-size: 12px;
      letter-spacing: 0.22499999403953552px;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 17px;
      margin: 7px 0 0 49px;
    }
    .text_220 {
      width: 49px;
      height: 17px;
      overflow-wrap: break-word;
      color: rgba(96, 127, 181, 1);
      font-size: 12px;
      letter-spacing: 0.22499999403953552px;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 17px;
      margin: 7px 5px 0 16px;
    }
  }

  .block_27 {
    background-color: rgba(4, 47, 115, 1);
    width: 257px;
    height: 30px;
    margin-left: 12px;
    // justify-content: flex-center;
    span{
        overflow: hidden;
    }
    .text_221 {
      background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.8) 0,
        rgba(255, 255, 255, 0) 100%
      );
      width: 24px;
      height: 17px;
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      font-size: 13px;
      letter-spacing: 0.24375000596046448px;
      font-family: YouSheBiaoTiHei;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 17px;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 9px 0 0 11px;
    }
    .text_222 {
      display: inline-block;
      width: 49px;
      height: 23px;
      overflow-wrap: break-word;
      color: rgba(253, 67, 66, 1);
      font-size: 18px;
      letter-spacing: 0.3375000059604645px;
      font-family: YouSheBiaoTiHei;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 23px;
      margin: 4px 0 0 -18px;
    }

    .text_236 {
      display: inline-block;
      width: 49px;
      height: 17px;
      overflow-wrap: break-word;
      color: rgba(96, 127, 181, 1);
      font-size: 12px;
      letter-spacing: 0.22499999403953552px;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 17px;
      margin: 7px 0 0 17px;
    }

    .text_223 {
      display: inline-block;
      width: 91px;
      height: 17px;
      overflow-wrap: break-word;
      color: rgba(102, 255, 255, 1);
      font-size: 12px;
      letter-spacing: 0.22499999403953552px;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 17px;
      margin: 7px 0 0 0;
    }
    .text_224 {
      display: inline-block;
      width: 50px;
      height: 17px;
      overflow-wrap: break-word;
      color: rgba(102, 255, 255, 1);
      font-size: 12px;
      letter-spacing: 0.22499999403953552px;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 17px;
      margin: 7px 0 0 0;
    }
    .thumbnail_30 {
      display: inline-block;
      width: 6px;
      height: 10px;
      margin-bottom: 3px;
    }
    .thumbnail_3111 {
      width: 10px;
    }
    .thumbnail_3112 {
      padding-left: 2px;
    }
    .text_225 {
      display: inline-block;
      // width: 25px;
      height: 17px;
      overflow-wrap: break-word;
      color: rgba(78, 232, 152, 1);
      font-size: 12px;
      letter-spacing: 0.22499999403953552px;
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 17px;
      margin: 7px 0 0 5px;
    }
  }
  
  
}
</style>
